<template>
  <view class="item-container" @click="getDetail">
    <view class="item">
      <view class="header">
        <view class="info">
          <view class="img">
            <image
              :src="
                item.user
                  ? item.user.avatar
                  : '../../static/images/user_avatar_default.png'
              "
              mode="scaleToFill"
            />
          </view>
          <view class="title">
            {{ item.title }}
          </view></view
        >
        <view class="top" v-if="item.bkiszhiding == 1">
          <text>置顶</text>
        </view>
      </view>
      <view class="status">
        <view class="label">{{ item.category_name }}</view>
        <view class="look-num">
          <i class="iconfont icon-chakan" />
          <text class="look-num"> {{ item.cksl }}</text>
        </view>
        <view class="cooperation">
          <i class="iconfont icon-icon-person-hezuo2" />

          <text class="look-num"> {{ item.zxsl }}</text>
        </view>
        <view class="time" v-if="!item.top_status">
          <text v-if="timeDifference"> {{ timeDifference }}天前</text>

          <text v-else-if="minuteDifference < 60"
            >{{ minuteDifference }}分钟前</text
          >
          <text v-else>{{ hourDifference }}小时前</text>
        </view>
        <view class="top" v-else>
          <view class="text">置顶</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const dayjs = require("dayjs");

export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      time: null,
    };
  },
  created() {
    this.time = dayjs();
  },
  methods: {
    getDetail() {
      this.$emit("getDetail", this.item);
    },
  },
  computed: {
    timeDifference() {
      const targetDate = dayjs(this.item.updated_at);
      const diffInMilliseconds = targetDate.diff(this.time, "day");
      return Math.abs(diffInMilliseconds);
    },
    hourDifference() {
      const targetDate = dayjs(this.item.updated_at);
      const diffInMilliseconds = targetDate.diff(this.time, "hour");
      return Math.abs(diffInMilliseconds);
    },
    minuteDifference() {
      const targetDate = dayjs(this.item.updated_at);
      const diffInMilliseconds = targetDate.diff(this.time, "minute");
      return Math.abs(diffInMilliseconds);
    },
  },
};
</script>

<style lang="scss" scoped>
.item-container {
  padding: 16rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f1f1f1;
  .item {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .info {
        display: flex;
        align-items: center;
        .title {
          margin-left: 15rpx;
          font-size: 28rpx;
          font-weight: 500;
        }
        .img {
          image {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
          }
        }
      }
      .top {
        margin-right: 20rpx;
        font-size: 22rpx;
        color: #fff;
        padding: 5rpx 10rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        background-image: linear-gradient(to right, #ee1800, #f46b3b);
      }
    }
    .status {
      display: flex;
      margin-top: 20rpx;
      justify-content: space-around;
      font-size: 26rpx;
      color: #999;
      .text {
        background-image: linear-gradient(to right, rgb(195, 6, 6), #f6ba59);
        color: #fff;
        padding: 2rpx 8rpx;
        border-radius: 8rpx;
        box-sizing: border-box;
        font-size: 24rpx;
      }
    }
  }
  .look-num {
    margin-left: 20rpx;
  }
}
</style>
